<template>
  <div class="form-body w-full">
    <a-form ref="formRef"
            :model="form"
            :rules="rules"
            :label-col=" {style: { width: '110px' } }"
            :wrapper-col="{ sm: 8, xs: 24 }"
    >

      <a-row>
        <a-col :span="24">
          <a-form-item label="商品规格" name="spec_type">
            <a-radio-group v-model:value="form.spec_type">
              <a-radio :value="0">单规格</a-radio>
              <a-radio :value="1">多规格</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <!--单规格添加-->
      <template v-if="form.spec_type===0">
        {{oneFormValidate}}
        <a-row>
          <a-col :span="24">
            <a-form-item label="图片">
              <upload-image v-model:value="oneFormValidate[0].pic"></upload-image>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row >
          <a-col :span="24">
            <a-form-item label="售价" :name="['oneFormValidate',0,'price']" :rules="{required: true,message: '请填写售价',trigger: 'blur'}">
              <a-input-number
                v-model:value="oneFormValidate[0].price"
                :min="0"
                :max="9999999999"
                :precision="2"
                allow-clear
                placeholder="请填写售价"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>

        </a-row>
        <a-row >
          <a-col :span="24">
            <a-form-item label="商品编号" :name="['oneFormValidate',0,'bar_code']" :rules="{required: true,message: '请输入商品编号',trigger: 'blur'}">
              <a-input
                allow-clear
                placeholder="请输入商品编号"
                v-model:value="oneFormValidate[0].bar_code"
              ></a-input>
            </a-form-item>
          </a-col>

        </a-row>

      </template>

    </a-form>
  </div>
</template>

<script setup>
import useFormData from "@/utils/use-form-data";
import { ref, reactive, watch, toRaw, nextTick } from "vue";
import { cloneDeep } from "lodash-es";
import { assignObject } from "ele-admin-pro";

const props = defineProps({
  data: Object
});
const formRef = ref(null);
// 表单数据
const { form, resetFields, assignFields } = useFormData({
  spec_type: undefined,
  spec_data: [],
  price:'',
  bar_code: '',
});
const rules = reactive({
  spec_type: [
    {
      required: true,
      message: "请选择商品规格",
      type: "number",
      trigger: "blur"
    }
  ]
});

const manyFormValidate = reactive([]);
const oneFormValidate = reactive([
  {
    pic: [],
    price: 0,
    cost: 0,
    ot_price: 0,
    stock: 0,
    bar_code: "",
    weight: 0,
    volume: 0,
    brokerage: 0,
    brokerage_two: 0,
    vip_price: 0,
    virtual_list: [],
    coupon_id: 0
  }
]);


/** 更新visible */
const handleUpdateVisible = (value) => {
  emit("update:visible", value);
};

const validate = () => {
  return formRef.value.validate();
};

watch(() => props.data, (val) => {
  let cloneVal = cloneDeep(toRaw(val));
  assignObject(form, cloneVal);
}, {
  deep: true,
  immediate: true
});

const getFormData = () => {
  const formData = cloneDeep(toRaw(form.value));
  return formData;
};


defineExpose({
  validate,
  resetFields,
  getFormData,
  form
});

</script>

<style scoped>

</style>
